<template>
  <div class="app-container">
    <a-title @clickPreview="preview" />
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="140px"
      style="margin-top: 20px; border-bottom: 1px solid #dfe6ec"
    >
    <el-form-item label="流程类型" prop="sheetCode">
      <!--
        workflowTypes
      -->
        <el-select
          v-model="queryParams.sheetCode"
          placeholder="请选择流程类型"
          clearable
          filterable
          size="small"
          style="width: 240px"
        >
          <el-option
            v-for="item in workflowTypes"
            :key="item.url"
            :label="item.workflowName"
            :value="item.url"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="项目名称" prop="projectName">
        <el-input
          v-model="queryParams.projectName"
          placeholder="请输入项目名称"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="getList"
        />
      </el-form-item>
      <el-form-item label="项目代码" prop="code">
        <el-input
          v-model="queryParams.code"
          placeholder="请输入项目代码"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="getList"
        />
      </el-form-item>
      <el-form-item label="项目负责人" prop="projectLeader">
        <el-input
          v-model="queryParams.projectLeader"
          placeholder="请输入项目负责人"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="getList"
        />
      </el-form-item>
       <el-form-item label="业务名称" prop="businessName">
        <el-input
          v-model="queryParams.businessName"
          placeholder="请输入业务名称"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="getList"
        />
      </el-form-item>
       <el-form-item label="报告号/招标代理号" prop="reportNo">
        <el-input
          v-model="queryParams.reportNo"
          placeholder="请输入报告号/招标代理号"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="getList"
        />
      </el-form-item>
      <el-form-item label="业务类别" prop="businessTypeId">
        <el-cascader
          v-model="queryParams.businessTypeId"
          :options="categoryOptions"
          :show-all-levels="false"
          :props="{ value: 'id', emitPath: false }"
          filterable
          clearable
          style="width: 240px"
          placeholder="请选择业务类别"
        />
      </el-form-item>
      
      <el-form-item label="流程状态" prop="status">
        <el-select
          v-model="queryParams.status"
          placeholder="请选择流程状态"
          clearable
          size="small"
          style="width: 240px"
        >
          <el-option
            v-for="item in statusOptions"
            :key="item.dictValue"
            :label="item.dictLabel"
            :value="item.dictValue"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="发起人" prop="origin">
        <el-input
          v-model="queryParams.origin"
          placeholder="请输入发起人"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="getList"
        />
      </el-form-item>
      <el-form-item label="发起时间">
        <el-date-picker
          v-model="queryParams.workflowStartTime"
          type="daterange"
          range-separator="-"
          value-format="yyyy-MM-dd"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 240px"
        ></el-date-picker>
      </el-form-item>

      <el-form-item label="完成时间">
        <el-date-picker
          v-model="queryParams.workflowEndTime"
          type="daterange"
          range-separator="-"
          value-format="yyyy-MM-dd"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 240px"
        ></el-date-picker>
      </el-form-item>

      <el-form-item label="审批人">
         <el-input
          v-model="queryParams.auditorPerson"
          placeholder="请输入审批人"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="getList"
        />
      </el-form-item>
      <el-form-item label="评审专家">
         <el-input
          v-model="queryParams.expertName"
          placeholder="请输入评审专家"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="getList"
        />
      </el-form-item>

      <el-form-item style="margin-left:70px;width:150px;">
        <el-checkbox v-model="queryParams.myWorkflow">我的待办</el-checkbox>
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="getList"
          >查询</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="reset"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-table
      stripe
      :data="tableData"
      style="width: 100%"
      v-loading="loading"
      @sort-change="tableSortChange"
      :default-sort="{ prop: 'originTime', order: 'descending' }"
    >
      <el-table-column label="序号" type="index" width="50"></el-table-column>
      <el-table-column
        label="流程类型"
        prop="workflowName"
        :sort-orders="['ascending', 'descending']"
        sortable="custom"
      ></el-table-column>
      <el-table-column
        label="项目名称"
        width="200"
        prop="projectName"
        :sort-orders="['ascending', 'descending']"
        sortable="custom"
      ></el-table-column>
      <el-table-column
        label="项目代码"
        prop="code"
        :sort-orders="['ascending', 'descending']"
        sortable="custom"
      ></el-table-column>
      <el-table-column
        label="项目负责人"
        prop="projectLeader"
        :sort-orders="['ascending', 'descending']"
        sortable="custom"
        width="110"
      ></el-table-column>
       <el-table-column
        label="业务名称"
        prop="businessName"
        width="200"
        :sort-orders="['ascending', 'descending']"
        sortable="custom"
      ></el-table-column>
       <el-table-column
        label="报告号/招标代理号"
        prop="reportNo"
        width="160"
        :sort-orders="['ascending', 'descending']"
        sortable="custom"
      ></el-table-column>
      <el-table-column
        label="业务类别"
        prop="businessTypeName"
        :sort-orders="['ascending', 'descending']"
        sortable="custom"
        align="center"
      ></el-table-column>
      <el-table-column
        label="发起人"
        prop="origin"
        :sort-orders="['ascending', 'descending']"
        sortable="custom"
      ></el-table-column>
      <el-table-column
        label="发起时间"
        prop="originTime"
        :sort-orders="['ascending', 'descending']"
        align="center"
        sortable="custom"
        width="100"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.originTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="完成时间"
        prop="endTime"
        :sort-orders="['ascending', 'descending']"
        align="center"
        sortable="custom"
        width="100"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.endTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="审批环节"
        prop="node"
        :sort-orders="['ascending', 'descending']"
        align="center"
        sortable="custom"
        width="100"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.statusType === 'success' || scope.row.statusType === 'info'"></span>
          <span v-else>{{ scope.row.node }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="审批人"
        prop="auditor"
        align="center"
        :sort-orders="['ascending', 'descending']"
        sortable="custom"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.statusType === 'success' || scope.row.statusType === 'info' "></span>
          <span v-else>{{ scope.row.auditor }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="评审专家"
        prop="expertName"
        align="center"
        :sort-orders="['ascending', 'descending']"
        sortable="custom"
      >
      </el-table-column>
      <el-table-column label="流程状态" prop="status" width="90">
        <template slot-scope="scope">
          <el-tag :type="scope.row.statusType" disable-transitions>{{
            scope.row.statusText
          }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        align="center"
        width="100"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <a :href="scope.row.url" target="_blank">
            <i class="el-icon-view aicon"></i>查看流程
          </a>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- 预览 -->
    <el-dialog :visible.sync="openPreview" width="80%">
      <iframe
        :src="manualPreviewUrl"
        frameborder="0"
        width="100%"
        height="700px"
      ></iframe>
    </el-dialog>
  </div>
</template>
<script>
import { workflowView } from "@/api/workflow/workflow";
import { treeselect } from "@/api/system/business_category";
import { workflowTypelist } from "@/api/system/workflowConfig";
import aTitle from "@/components/Title";
export default {
  name: "SearchWorkflow",
  components: { aTitle },
  data() {
    return {
      manualPreviewUrl: null,
      openPreview: false,
      total: 0,
      categoryOptions: [],
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        projectName: undefined,
        businessTypeId: undefined,
        name: undefined,
        status: undefined,
        workflowStartTime: undefined,
        workflowEndTime: undefined,
        auditorPerson:undefined,
        myWorkflow:false,
        origin:undefined,
        sheetCode:undefined,
        expertName:undefined
      },
      loading: true,
      tableData: [],
      workflowTypes:[],
      statusOptions: [
        {
          dictValue: "0",
          dictLabel: "进行中",
        },
        {
          dictValue: "1",
          dictLabel: "已完成",
        },
        {
          dictValue: "2",
          dictLabel: "已取消",
        },
      ],
    };
  },
  created() {
    this.getListWorkflowConfig();
    //this.queryParams.auditorPerson = JSON.parse(sessionStorage.getItem('userinfo') || {}).nickName;
    //this.queryParams.status = "0";
    //this.getList();
    treeselect().then((res) => {
      if (res.code === 200) {
        this.categoryOptions = res.data;
      }
    });
  },
  methods: {
    getListWorkflowConfig(){
      workflowTypelist().then(res=>{
        this.workflowTypes = res.data;
      });
    },
    preview() {
      this.openPreview = true;
      this.manualPreviewUrl = `${this.previewUrl}${encodeURIComponent(
        `${this.operationManual}首页/流程搜索.xlsx`
      )}&name=${encodeURIComponent("流程搜索.xlsx")}`;
    },
    getList() {
      
     console.log(this.queryParams.myWorkflow);
      this.loading = true;
      var reqParams = {
        businessTypeId: this.queryParams.businessTypeId,
        name: this.queryParams.name,
        order: this.queryParams.order,
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
        projectName: this.queryParams.projectName,
        sortBy: this.queryParams.sortBy,
        status: this.queryParams.status,
        auditorPerson: this.queryParams.auditorPerson,
        code: this.queryParams.code,
        reportNo: this.queryParams.reportNo,
        projectLeader:this.queryParams.projectLeader,
        businessName:this.queryParams.businessName,
        origin:this.queryParams.origin,
        sheetCode:this.queryParams.sheetCode,
        expertName:this.queryParams.expertName
      };

      if(this.queryParams.myWorkflow){
        reqParams.auditorPerson = JSON.parse(sessionStorage.getItem('userinfo') || {}).nickName;
        reqParams.status = "0";
      }

      if (this.queryParams.workflowStartTime) {
        reqParams.originTimeStart = this.queryParams.workflowStartTime[0];
        reqParams.originTimeEnd = this.queryParams.workflowStartTime[1];
      }
      if (this.queryParams.workflowEndTime) {
        reqParams.endTimeStart = this.queryParams.workflowEndTime[0];
        reqParams.endTimeEnd = this.queryParams.workflowEndTime[1];
      }

      workflowView(reqParams).then((res) => {
        if (res.code === 200) {
          this.tableData = res.rows.map((item) => {
            var jobNo = JSON.parse(sessionStorage.getItem("userinfo") || {})
              .jobNo;
              if(item.instanceUrl!=null&&item.instanceUrl!=""&&item.instanceUrl!==undefined){
                item.instanceUrl = item.instanceUrl.indexOf("InstanceId")==-1? item.instanceUrl+"&InstanceId="+item.instanceId:item.instanceUrl;
              }
              if(item.url!=null&&item.url!=""&&item.url!==undefined){
                item.url = item.url.indexOf("InstanceId")==-1? item.url+"&InstanceId="+item.instanceId:item.url;
              }
            if (item.status === "1") {
              item.url = item.instanceUrl + "&workState=1&code=" + jobNo;
            } else {
              if (jobNo === item.originNo) {
                item.url = item.url + "&code=" + jobNo;
              } else {
                item.url = item.instanceUrl + "&workState=2&code=" + jobNo;
              }
            }

            if (item.status === "0") {
              item.statusText = "进行中";
              item.statusType = "primary";
            } else if (item.status === "1") {
              item.statusText = "已完成";
              item.statusType = "success";
            } else {
              item.statusText = "已取消";
              item.statusType = "info";
            }
            return item;
          });
          this.loading = false;
          this.total = res.total;
        }
      });
    },
    reset() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 20,
        projectName: undefined,
        businessTypeId: undefined,
        name: undefined,
        status: undefined,
        workflowStartTime: undefined,
        workflowEndTime: undefined,
        myWorkflow:false,
        expertName:undefined
      };
      this.getList();
    },
    tableSortChange(column) {
      this.queryParams.pageNum = 1;

      if (column.order === "descending") {
        this.queryParams.sortBy = column.prop;
        this.queryParams.order = "desc";
      } else {
        this.queryParams.sortBy = column.prop;
        this.queryParams.order = "asc";
      }
      this.getList();
    },
  },
};
</script>
<style lang="scss" scoped>
.tabletitle {
  padding-bottom: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #dfe6ec;
  span {
    font-family: Microsoft YaHei;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.85);
    letter-spacing: -0.41px;
  }
  .el-button--medium {
    font-size: 12px;
    padding: 7px 13px;
  }
}

/deep/.el-table .cell {
  font-family: PingFangSC-Regular;
  color: rgba(0, 0, 0, 0.85);
  letter-spacing: 0;
  a {
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #1890ff;
    letter-spacing: 0;
    text-align: right;
    line-height: 14px;
    margin-left: 5px;
  }
}

/deep/.el-table--medium td {
  padding: 12px 0;
}
</style>